<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'我的出售'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 筛选按钮 -->
    <view class="serchBtn">
      <button
        @click="checkFlage(0)"
        type="primary"
        :class="status == 0 ? 'checkout' : 'noCheck'"
      >
        待审核
      </button>
      <button
        @click="checkFlage(1)"
        type="primary"
        :class="status == 1 ? 'checkout' : 'noCheck'"
      >
        审核通过
      </button>
      <button
        @click="checkFlage(3)"
        type="primary"
        :class="status == 3 ? 'checkout' : 'noCheck'"
      >
        审核不通过
      </button>
    </view>
    <!-- 全部列表 -->

    <view class="allSaleTitle">
      <view class="saleTitle">全部列表</view>
      <view class="saleSteUp">
        <view @click="toblishPatent"
          ><view class="iconfont icon-jiahao"></view>发布专利</view
        >
        <view style="margin: 0" @click="isEditFn"
          ><view class="iconfont icon-piliangpingjia"></view>批量</view
        >
      </view>
    </view>

    <view class="saleItem" v-for="(item, index) in dataList" :key="index">
      <view :class="status == 1? 'imgconten':'imgconten1'"
        ><view class="info" @click="longPress(item.ID)">{{ auditStatus[item.auditStatus * 1] }}</view>
      </view>
      <checkbox
        class="checkCream"
        :checked="isCheck[index]"
        @click="isCheckOk(index, isCheck[index])"
        v-show="isEdit"
      />
      <view
        class="editSale"
        @click="toPatentDetile(item.ID)"
        @longpress="longPress(item.ID)"
      >
        <view class="saleTitleItem">{{ item.name }}</view>
        <view class="patentNum"
          >专利号： <text>CN{{ item.num }}</text>
        </view>
        <view class="patentNum"
          >专利类型： <text>{{ item.desc }}</text>
        </view>
        <view class="patentTime iconfont icon-shizhong">
          <text>{{ item.UpdatedAt?.split("T")[0] }}</text>
        </view>
      </view>
    </view>
    <!-- 占位 -->
    <view style="height: 145rpx"></view>
  </view>
  <view :class="isEdit ? 'checkAll' : 'noheight'">
    <view class="isCheckAll"
      ><checkbox
        class="checkCream"
        @click="isCheckAll"
        :checked="checkAll"
        color="#1677FF"
      />全选</view
    >
    <view class="saleBtn">
      <!-- <button type="paramy" @click="upPatent(false)">{{ status == 2 ? "上架" : "下架" }}</button> -->
      <button type="paramy" @click="upPatent(true)">删除</button></view
    >
  </view>
  <!-- 确认删除 -->
  <uni-popup ref="alertDialog" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认删除</view>
        <view class="loginInfo1">是否确定当前选中的专利？</view>
        <view class="affirm1">
          <view class="" @click="upPatent(false)">取消</view>
          <view class="solid1" @click="deletePatent(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 确认删除 -->
  <uni-popup ref="edit" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认是否需要{{status != 0? "" : "撤回"}}编辑当前数据？</view>
        <!-- <view class="loginInfo1">是否确定当前专利集下面的专利？</view> -->
        <view class="affirm1">
          <view class="" @click="isEdtd(false)">取消</view>
          <view class="solid1" @click="isEdtd(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { inject, reactive, toRefs, ref } from "vue";
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
let data = reactive({
  dataList: [],
  page: 1,
  // 认0表示待上架，1表示已上架，2表示已下架
  status: 0,
  dataList: [],
  isEdit: false,
  auditStatus: ["待审核", "审核通过","", "审核不通过"],
  isCheck: [],
  checkAll: false,
  userInfo: {},
  isInfo: [],
  isStuta: [],
  id: null,
  upPatentData: {
    ids: [],
    status: "2",
  },
});
let alertDialog = ref("alertDialog");
let edit = ref("edit");
let { dataList, status, isEdit, auditStatus, isCheck, checkAll } = toRefs(data);
onPullDownRefresh(() => {
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  if (!data.isEdit) {
    data.page = data.page + 1;
    updataList();
  }
});
const isEditFn = () => {
  data.isEdit = !data.isEdit;
};
const isCheckOk = (index) => {
  data.isCheck[index] = !data.isCheck[index];
  if (data.isCheck.includes(false)) {
    data.checkAll = false;
  } else {
    data.checkAll = true;
  }
};
const isCheckAll = () => {
  data.checkAll = !data.checkAll;
  // if (data.checkAll) {
  data.isCheck = data.isCheck.map((item, index) => {
    if (data.checkAll) {
      return true;
    } else {
      return false;
    }
  });
  // } else {
  //   data.isCheck = data.isCheck.map((item) => {
  //     return false;
  //   });
  // }
};
const isEdtd = (bool) => {
  if (bool) {
    uni.navigateTo({ url: `/pages/editPatentDetile/editPatentDetile?id=${data.id}&isShow=0` });
    edit.value.close();
  } else {
    edit.value.close();
  }
};
const longPress = (id) => {
  data.id = id;
  edit.value.open();
  // uni.navigateTo({ url: `/pages/userInfoDetile/userInfoDetile?id=${data.id}&isShow=0` });
};
onShow(() => {
  uni.request({
    url: $url + `/zlBaseType/getZlBaseTypeList `,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.isInfo = res.data.data.list;
    },
  });
  data.page = 1;
  data.dataList = [];
  updataList();
});
const updataList = () => {
  data.checkAll = false;
  // 用户登陆状态
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (!res.data.token?.length > 0) {
        uni.redirectTo({
          url: "/pages/login/login",
        });
      }
      data.userInfo = res.data;
      uni.request({
        url:
          $url +
          `/zlBase/getZlBaseList?page=${data.page}&pageSize=10&auditStatus=${data.status}&userId=${data.userInfo.ID}`,
        method: "GET",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          res.data.data.list.map((item) => {
            data.isInfo.map((res) => {
              if (res.ID == item.type) {
                item.desc = res.name;
              }
            });
            data.dataList.push(item);
          });
          data.isCheck = data.dataList.map((item) => {
            return false;
          });
          data.isStuta = data.dataList.map((item) => {
            return false;
          });
        },
      });
    },
  });
};
const upPatent = (bool) => {
  if (bool && data.isCheck.includes(true)) {
    alertDialog.value.open();
  } else {
    alertDialog.value.close();
  }
};
const deletePatent = (del) => {
  data.isCheck.map((item, index) => {
    if (item) {
      data.upPatentData.ids.push(data.dataList[index].ID);
      console.log(data.upPatentData.ids);
    }
  });
  data.dataList = [];
  if (del) {
    uni.request({
      url: $url + `/zlBase/deleteZlBaseByIds`,
      method: "DELETE",
      timeout: 6000,
      header: {
        "x-token": data.userInfo.token,
      },
      data: { ids: data.upPatentData.ids },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        alertDialog.value.close();
        data.page = 1;
        updataList();
      },
    });
  } else {
    uni.request({
      url: $url + `/zlBase/shelf`,
      method: "PUT",
      timeout: 6000,
      header: {
        "x-token": data.userInfo.token,
      },
      data: data.upPatentData,
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.dataList = [];
        data.page = 1;
        updataList();
      },
    });
  }
  data.dataList = [];
  data.page = 1;
  // updataList();
  data.upPatentData.ids = [];
};
// 按钮切换
const checkFlage = (num) => {
  data.checkAll = false;
  data.dataList = [];
  data.status = num;
  data.isEdit = false;
  data.page = 1;
  updataList();
};

const toblishPatent = () => {
  uni.navigateTo({ url: "/pages/mySale/publishPatent/index" });
};
const toPatentDetile = (id) => {
  uni.navigateTo({ url: `/pages/patentDetails/index?id=${id}&isShow=${data.status}` });
};
</script>

<style scoped>
.index {
  padding-bottom: 55rpx;
}
.serchBtn {
  margin-top: 29rpx;
  display: flex;
  justify-content: flex-start;
}
.serchBtn button:after {
  border: 0;
}
.serchBtn button {
  margin: 0;
  margin-right: 52rpx;
  height: 74rpx;
  border-radius: 36rpx;
  line-height: 74rpx;
  font-size: 27rpx;
  font-weight: 400;
  background: #f5f5f5;
}
.checkout {
  background: #1677ff !important;
  color: #ffffff !important;
}
.noCheck {
  background: #f5f5f5 !important;
  color: #999999 !important;
}
.allSaleTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 47rpx;
}
.saleTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.saleSteUp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 29rpx;
  font-weight: 400;
  color: #666666;
}
.saleSteUp view {
  display: flex;
  align-items: center;
  margin-right: 58rpx;
}
.saleSteUp view .iconfont {
  margin-right: 12rpx;
}
.saleItem {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 32rpx;
  padding: 14rpx 21rpx 28rpx 19rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(201, 201, 201, 0.5), 2rpx 2rpx 9rpx 0rpx #f4f4f5;
  border-radius: 11rpx;
}
.imgconten {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("");
  background-size: cover;
  width: 176rpx;
  height: 86rpx;
  top: -14rpx;
  right: -21rpx;
}
.imgconten1 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("");
  background-size: cover;
  width: 176rpx;
  height: 86rpx;
  top: -14rpx;
  right: -21rpx;
}
.info {
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 36rpx;
}
.saleTitleItem {
  width: 470rpx;
  font-size: 29rpx;
  font-weight: 600;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentNum {
  margin-top: 10rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999;
}
.patentNum text {
  color: #333;
}
.patentTime {
  margin-top: 20rpx;
  padding-left: 18rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 69rpx;
  background: #f9f9fb;
  box-shadow: 4rpx 4rpx 22rpx 0rpx rgba(210, 210, 210, 0.5);
  border-radius: 11rpx;
  margin-right: 20rpx;
  font-size: 40rpx;
}
.patentTime text {
  display: inline-block;
  margin-left: 20rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.editSale {
  flex: 1 1;
  margin-left: 15rpx;
}
/* 悬浮窗 */
.checkAllCream {
  position: fixed;
  left: 0;
  bottom: -145rpx;
  width: 100%;
  height: 145rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.checkAll {
  position: fixed;
  left: 0;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 27rpx;
  width: 696rpx;
  height: 145rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.isCheckAll {
  font-size: 29rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  align-items: center;
}
.checkAll button {
  width: 139rpx;
  height: 53rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
  border-radius: 26rpx;
  border: 2rpx solid #1677ff;
  font-size: 29rpx;
  font-weight: 400;
  color: #1677ff;
  line-height: 40rpx;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saleBtn button {
  margin-left: 36rpx;
}
.saleBtn {
  display: flex;
  align-items: center;
}
.noheight {
  height: 0;
  display: none !important;
}
.dataList1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle1 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  margin: 25rpx auto;
}
.affirm1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm1 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid1 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo1 {
  margin: 30rpx;
}
</style>
